<template>
    <Teleport to="body">
        <div class="look" v-show="!unlock" ref="lock">
            <!-- <JButton label="Join for free" @click="onRegister"></JButton> -->
            <div class="mtip" @click="onRegister"><span class="main-color">Sign up</span> to unlock more benefits</div>
            <!-- <div class="mtip" @click="onRegister"><span class="main-color">注冊</span> 即可解鎖更多權益</div> -->
            <!-- <div class="close" v-if="close" @click="closeLock">
                <VIcon class="close-icon">mdi mdi-close-outline</VIcon>
            </div> -->
        </div>
    </Teleport>
    
</template>

<script lang="ts" setup>
import JButton from "@/components/j-button/index.vue";
import { useLock } from "@/hooks/useLock";
import { useAccount } from "@/stores/account";
import { useLayout } from "@/stores/layout";
import { onMounted, ref } from "vue";
const { unlock,closeLock } = useLock();
const account = useAccount();
const lock = ref<any>(null);
const layout = useLayout();

const langs = "Sign up to unlock more benefits";
const ens = "注冊即可解鎖更多權益";

const onRegister = () => {
    if(layout.isMobile){
        location.href = "/login"
    }
    else{
        account.changePopRegister(true);
    }
    
}
const props = defineProps({
    close: {
        type: Boolean,
        default: false
    }
});

onMounted(() => {
    // const targetNode = lock.value;

    // // 观察器的配置（需要观察什么变动）
    // const config = { attributes: true, childList: true, subtree: false, attributeFilter: ['style'] };

    // // 当观察到变动时执行的回调函数
    // const callback = function (mutationsList:any, observer:any) {
    //     // Use traditional 'for loops' for IE 11
    //     for (let mutation of mutationsList) {
    //         if (mutation.type === 'childList') {
    //             console.log('A child node has been added or removed.');
    //         }
    //         else if (mutation.type === 'attributes') {
    //             console.log('The ' + mutation.attributeName + ' attribute was modified.');
    //         }
    //     }
    // };

    // // 创建一个观察器实例并传入回调函数
    // const observer = new MutationObserver(callback);

    // // 以上述配置开始观察目标节点
    // observer.observe(targetNode, config);
});

</script>

<style lang="less" scoped>
.mtip{
    color: #fff;
    cursor: pointer;
    font-size: 18px;
}
.look {
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    position: absolute;
    left: 0;
    bottom: 0;
    width: calc(100% - 380px);
    // height: calc(100% + 36px);
    height: calc(100% - 50px);;
    z-index: 80;
    backdrop-filter: blur(10px);
    // position: relative;
    .close{
        position: absolute;
        top: 10px;
        right: 10px;
        cursor: pointer;
        .close-icon{
            color: #686873;
            width: 20px;
            height: 20px;
            &:hover{
                transform: scale(1.2);
            }
        }
    }
}
</style>